<template>
  <div>
    <div>
      <div v-for="val in values" :key="val.name">
        <van-divider v-if="val.type === 'divider'" />
        <van-cell
          v-else
          :title="val.title"
          :icon="val.icon"
          is-link
          :value="val.value && val.value()"
          :to="val.path"
        />
      </div>
    </div>
  </div>
</template>

<script>
import menus from './menus'

// import api from '@/api'

export default {
  name: 'Contacts',
  components: {},

  data() {
    return {
      menuItems: menus.contacts.children,

      dataCounts: {},
      values: menus.contacts.children.map(item => {
        return this.toCellValue(item)
      })
    }
  },
  computed: {},
  async created() {
    await this.init()
  },

  methods: {
    async init() {
      //
      const dcs = {}

      const menuItems = this.menuItems

      for (let i = 0; i < menuItems.length; i++) {
        if (menuItems[i].model) {
          dcs[menuItems[i].model] = await this.$store.dispatch(
            'object/search_count',
            {
              _model: menuItems[i].model
            }
          )
        }
      }
      this.dataCounts = { ...dcs }
    },

    toCellValue(item) {
      return {
        path: {
          path: '/object/list',
          query: { model: item.model }
        },
        type: item.type,
        title: item.title,
        name: item.name,
        // icon: 'friends-o'
        value: () => {
          return this.dataCounts[item.model]
        }
      }
    }
  }
}
</script>

<style type="text/css"></style>
